<template>
  <b-col @mouseenter="response = true" @mouseleave="response = false" v-if="id == comment.type" class="comments px-2 pt-1">
    <b-link @click="toUserPage(comment.user.id)" class="text-decoration-none">{{comment.user.name}}</b-link>: <span>{{comment.content}}</span> <span
      class="text-muted" style="font-size:13px"> · {{getTime(comment.time)}}</span><b-link v-if="response" class="text-decoration-none text-muted ml-3"
      @click="commentEdit" style="font-size:13px">回复</b-link>
  </b-col>
  <b-col @mouseenter="response = true" @mouseleave="response = false" v-else class="comments px-2 pt-1">
    <b-link class="text-decoration-none">{{comment.user.name}}</b-link> 回复 {{reciver}}: <span>{{comment.content}}</span> <span class="text-muted"
      style="font-size:13px"> · {{getTime(comment.time)}}</span><b-link @click="commentEdit" v-if="response" class="text-decoration-none text-muted ml-3"
      style="font-size:13px">回复</b-link>
  </b-col>
</template>
<script>
import tool from '@/utils/tool'
export default {
  props: {
    id: String,
    //评论池
    commentList: Object,
    //评论本体
    comment: Object,

  },
  data() {
    return {
      // 被评论者昵称
      reciver: "",
      //评论标志显示
      response: false,
    }
  },
  created() {
    // console.log(this.id, this.type);
    // console.log("传入子组件的", this.commentList.data[0].id, this.type);
    for (let i = 0; i < this.commentList.data.length; i++) {
      // console.log(this.commentList.data[i].id + "-------" + this.comment.type);
      if (this.commentList.data[i].id == this.comment.type) this.reciver = this.commentList.data[i].user.name
    }
  },
  methods: {
    //转换时间
    getTime(time) {
      return tool.transTime(time);
    },
    //跳转到该用户主页
    toUserPage(id) {
      this.$pageRedirect.toPersonPage(id);
    },
    //打开评论框
    commentEdit() {
      this.$parent.$parent.commentEdit(2, this.id, "@" + this.comment.user.name + ": " + this.comment.content, this.comment.id);
    }
  },
}
</script>
<style scoped>
</style>
